<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24"><div class="grid-content">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>子系统</el-breadcrumb-item>
          <el-breadcrumb-item>设置子系统</el-breadcrumb-item>
        </el-breadcrumb>
      </div></el-col>
    </el-row>
    <el-table
      :data="this.tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="NAME">
      </el-table-column>
      <el-table-column
        prop="time"
        label="TIME">
      </el-table-column>
      <el-table-column
        prop="license"
        label="LICENSES FAULT STATUS">
        <template scope="scope">
          <a class="link"
             @click="getDetail(scope.row.name)">{{scope.row.license.handle}}</a>
          <span :class="scope.row.license.status=='OK'?'OK':'Fail'">{{scope.row.license.status}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="child"
        label="CHILD FAULT STATUS">
        <template scope="scope">
          <span :class="scope.row.child=='OK'?'OK':'Fail'">{{scope.row.child}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="dwell"
        label="LOCATE DWELL TIME">
      </el-table-column>
      <el-table-column
        prop="timeout"
        label="FAST TIMEOUT">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.timeout">
        </template>
      </el-table-column>
      <el-table-column
        prop="verify"
        label="VERITY POLICY">
      </el-table-column>
      <el-table-column
        prop="encrypt"
        label="ENCRYPT PD POLICY">
      </el-table-column>
      <el-table-column
        prop="sfxEnabled"
        label="SFX ENABLED">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.sfxEnabled">
        </template>
      </el-table-column>
      <el-table-column
        prop="uId"
        label="UUID">
      </el-table-column>
      <el-table-column
        prop="users"
        label="USERS">
      </el-table-column>
    </el-table>
    <el-row></el-row>
    <el-form ref="form" :model="form" label-width="200px" v-show="formShow">
      <el-form-item label="RP Subsystem Name:">
        <el-input v-model="form.sys_name"></el-input>
      </el-form-item>
      <el-form-item label="Locate Dwell Time:">
        <el-select v-model="form.dwell_time" placeholder="Please select">
          <el-option label="120" value="120"></el-option>
          <el-option label="150" value="150"></el-option>
          <el-option label="170" value="170"></el-option>
          <el-option label="200" value="200"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Read Retry Timeout:">
        <el-select v-model="form.retry_time" placeholder="Please select">
          <el-option label="500" value="500"></el-option>
          <el-option label="1000" value="1000"></el-option>
          <el-option label="2000" value="2000"></el-option>
          <el-option label="3000" value="3000"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="License Key:">
        <el-input v-model="form.license_key" placeholder="License Key"></el-input>
      </el-form-item>
      <el-form-item label="Encrypt Physical Disk Policy:">
        <el-radio-group v-model="form.encrypt">
          <el-radio label="No Policy" value=""></el-radio>
          <el-radio label="All New Pools" value=""></el-radio>
          <el-radio label="No News Pools" value=""></el-radio>
          <el-radio label="Select New Pools" value=""></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Encrypt Physical Disk Password:">
        <el-input type="password" v-model="form.encrypt_psd" placeholder="密码" style="margin-bottom: 10px"></el-input>
        <el-input type="password" v-model="form.encrypt_repsd" placeholder="确认密码"></el-input>
      </el-form-item>
      <el-form-item label="Fast Timeout:">
        <el-switch on-text="on" off-text="off" v-model="form.timeout"></el-switch>
      </el-form-item>
      <el-form-item label="Drive Error Tolerance:">
        <el-radio-group v-model="form.error_tolerance">
          <el-radio label="Low" value=""></el-radio>
          <el-radio label="Medium" value=""></el-radio>
          <el-radio label="High" value=""></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Single Controller Writeback:">
        <el-switch on-text="" off-text="" v-model="form.single_controller"></el-switch>
      </el-form-item>
      <el-form-item label="Pool Verify Policy:">
        <el-switch on-text="" off-text="" v-model="form.pool_verify"></el-switch>
      </el-form-item>
      <el-form-item label="Pool Block Size:">
        <el-radio-group v-model="form.pool_size">
          <el-radio label="512 bytes"></el-radio>
          <el-radio label="4k bytes"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="4K Drive Format Policy:">
        <el-radio-group v-model="form.drive_policy">
          <el-radio label="No Policy" value=""></el-radio>
          <el-radio label="Auto Format 4K to T10-PI Type2" value=""></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Time Zone:">
        <el-select v-model="form.timezone" placeholder="Not Set">
          <el-option label="500" value="500"></el-option>
          <el-option label="1000" value="1000"></el-option>
          <el-option label="2000" value="2000"></el-option>
          <el-option label="3000" value="3000"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Date Time:">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date_picker" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.time_picker" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="Network Time Protocol:">
        <el-switch on-text="on" off-text="off" v-model="form.network_time"></el-switch>
      </el-form-item>
      <el-form-item label="IP address for NTP:">
        <el-input v-model="form.IP_address1" placeholder="IP address for NTP" style="margin-bottom: 10px"></el-input>
        <el-input v-model="form.IP_address2" placeholder="IP address for NTP" style="margin-bottom: 10px"></el-input>
        <el-input v-model="form.IP_address3" placeholder="IP address for NTP" style="margin-bottom: 10px"></el-input>
        <el-input v-model="form.IP_address4" placeholder="IP address for NTP"></el-input>
      </el-form-item>
      <!--<el-form-item label="附加选择">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="选择1" name="type"></el-checkbox>
          <el-checkbox label="选择2" name="type"></el-checkbox>
          <el-checkbox label="选择3" name="type"></el-checkbox>
          <el-checkbox label="选择4" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊说明">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>-->
      <el-form-item>
        <el-button type="info" @click="onUpdate" size="large">更新</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  export default {
    name: 'subsystem_settings',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        tableData: [{
          name: 'DEFAULT',
          time: 'Thu Apr 13 10:45:24 2017',
          license: {handle: 'Add Key', status: 'OK'},
          child: 'OK',
          dwell: '120 seconds',
          timeout: true,
          verify: 'Enabled',
          encrypt: 'No Policy',
          sfxEnabled: false,
          uId: '60000100f000s52sdd000001222010020',
          users: 2
        }],
        formShow: false,
        form: {
          sys_name: '',
          dwell_time: '',
          retry_time: '',
          licence_key: '',
          encrypt: '',
          encrypt_psd: '',
          encrypt_repsd: '',
          timeout: false,
          error_tolerance: '',
          single_controller: false,
          pool_verify: false,
          pool_size: '',
          drive_policy: '',
          timezone: '',
          date_picker: '',
          time_picker: '',
          network_time: false,
          IP_address1: '',
          IP_address2: '',
          IP_address3: '',
          IP_address4: ''
        }
      }
    },
    methods: {
      getDetail () {
        this.formShow = !this.formShow
      },
      onUpdate () {
        console.log('submit!')
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  .el-form{
    width: 800px;
  }

</style>
